<%@ page language="java" contentType="text/html; charset=utf8"
    pageEncoding="utf8"%>
<!DOCTYPE html>
<html>
<head>

<meta charset="utf8">
    
<link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.css">
		<script type="text/javascript" src="bootstrap-4.6.1-dist/js/bootstrap.bundle.js"></script>
		<script type="text/javascript" src="js/jquery-3.6.1.min.js" ></script>
		<script type="text/javascript" src="bootstrap-4.6.1-dist/js/bootstrap.js"></script>
		<link href="icon/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet"/>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .message{
            display: inline-block;
            font-size: 12px;
            color: #999;
            /* background: url(images/mess.jpg) no-repeat left center; */
            padding-left: 20px;
        }
        .register img{
            position: relative;
            top: 6px;
            right: -20px;
            width: 18px;
        }
        .wrong{
            color: red;
        }
        .right{
            color: green;
        }
    </style>
<title>Insert title here</title>
</head>
<link rel="stylesheet" href="/hospital-system/bootstrap-5.3.0/css/bootstrap.css">
<body>
	<nav class="navbar navbar-dark bg-dark ">
   <a class="navbar-brand" href="#"><i class="bi bi-hospital-fill"></i>欢迎使用医生管理系统</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"></button>
  <form class="form-inline">
     <input type="button" class="btn btn-outline-success my-2 my-sm-0" 
     onclick="window.location.href='/hospital-system/jsp/doctorRegister.jsp';" value="退出">
  </form>
</nav>
	<div class="container mt-2">
		<form action="/hospital-system/doctorinsertdoctor" method="post" class="mt-3">
			<div class="row">
			 <div class="col-sm-7 offset-sm-3">
			<div class="mb-3 row">
			    <label for="userName" class="col-sm-2 col-form-label">用户名:</label>
			    <div class="col-sm-6">
			      <input type="text"  class="btn btn-outline-success my-2 my-sm-0" id="dname" name="dname">
			    </div>
			  </div>

			  
			  <div class="mb-3 row">
			    <label for="dnumber" class="col-sm-2 col-form-label">电话号码:</label>
			    <div class="col-sm-6">
			      <input type="text"  class="btn btn-outline-success my-2 my-sm-0" id="dnumber" name="dnumber">
			    </div>
			  </div>
			  <div class="mb-3 row">
			    <label for="deduct" class="col-sm-2 col-form-label">学历:</label>
			    <div class="col-sm-6">
			      <input type="text"  class="btn btn-outline-success my-2 my-sm-0" id="deduct" name="deduct">
			    </div>
			  </div>
			  	<div class="mb-3 row">
			    <label for="dexpre" class="col-sm-2 col-form-label">履历:</label>
			    <div class="col-sm-6">
			      <input type="text"  class="btn btn-outline-success my-2 my-sm-0" id="dexpre" name="dexpre">
			    </div>
			  </div>
			  <div class="mb-3 row">
			    <label for="cid" class="col-sm-2 col-form-label">科室id:</label>
			    <div class="col-sm-6">
			      <input type="text"  class="btn btn-outline-success my-2 my-sm-0" id="cid" name="cid">
			    </div>
			  </div>
			   <div class="mb-3 row">
			    <label for="cname" class="col-sm-2 col-form-label">科室名:</label>
			    <div class="col-sm-6">
			      <input type="text"  class="btn btn-outline-success my-2 my-sm-0" id="cname" name="cname">
			    </div>
			  </div>
          <div class="mb-3 row">
             <label for="dpassword" class="col-sm-2 col-form-label">密码:</label>
           <div class="col-sm-6">
            <input type="password" name="dpassword" id="dpassword" class="btn btn-outline-success my-2 my-sm-0 ipt">
            <img src="/hospital-system/images/mess.png"  id="tupian">
            <p class="message">输入6至16位的密码</p>
           </div>
		 </div>	
		<div class="row offest-row-2">
     <div class="col-sm-4 offest-col-2">
      <input type="submit" class="col-sm-4 form-control btn btn-primary" value="注册" >
      </div>
</div> 
</div>
     </div>
			  </form>
    </div>  
<script>
    var ipt=document.querySelector('.ipt');
    var message=document.querySelector('.message');
    var img=document.getElementById('tupian');
    ipt.onblur=function()
    {
        if(this.value.length<6||this.value.length>16)
        {
            message.className='message wrong';//如果直接改为.wrong的话，原有的样式也没了，因此需要在原有message样式上加上wrong的样式。
            img.src='/hospital-system/images/wrong.png';
          
            message.innerHTML='你输入的密码位数不正确';
        }
        else
        {
            message.className='message right';
            img.src='/hospital-system/images/right.png';
            
            message.innerHTML='你输入成功';
        }
    }
</script>
		  
</body>
</html>